<!DOCTYPE html>
<html>
<head>
<!-- jQuerry einbinden-->
<script type="text/javascript" src="../jquery-1.9.1.js"></script>

<title>I Like That</title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<!-- CSS einbinden -->
<link href="../style/screen.css" media="screen" type="text/css" rel="stylesheet">
<link href="../style/handheld.css" media="handheld" type="text/css" rel="stylesheet">

<!-- Mobile Einstellung-->
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

</head>
<body>

	
	<!-- Kopfzeile -->
	<header id="header-container">

		<img id="logo-header" src='../images/I_LIKE_THAT_LOGO.png' border="0">

	</header>

	<!--Seiteninhalt-->
	<section id="content-container">

		<section id="content">
			
			<!-- Facebook Login -->

	<div id="fb-root"> </div>
	<script>

		// Additional JS functions here
		window.fbAsyncInit = function() {
			FB
					.init({
						appId : '145706808946167', // App ID
						channelUrl : '//ems.informatik.uni-oldenburg.de:1317/i-like-that/html/channel.html', // Channel File
						status : true, // check login status
						cookie : true, // enable cookies to allow the server to access the session
						xfbml : true
					// parse XFBML
					});

			// Here we subscribe to the auth.authResponseChange JavaScript event. This event is fired
			// for any auth related change, such as login, logout or session refresh. This means that
			// whenever someone who was previously logged out tries to log in again, the correct case below 
			// will be handled. 
			FB.Event.subscribe('auth.authResponseChange', function(response) {
				// Here we specify what we do with the response anytime this event occurs. 
				if (response.status === 'connected') {
					// The response object is returned with a status field that lets the app know the current
					// login status of the person. In this case, we're handling the situation where they 
					// have logged in to the app.
					lobbyLink();
				} else if (response.status === 'not_authorized') {
					// In this case, the person is logged into Facebook, but not into the app, so we call
					// FB.login() to prompt them to do so. 
					// In real-life usage, you wouldn't want to immediately prompt someone to login 
					// like this, for two reasons:
					// (1) JavaScript created popup windows are blocked by most browsers unless they 
					// result from direct user interaction (such as a mouse click)
					// (2) it is a bad experience to be continually prompted to login upon page load.
					FB.login();
				} else {
					// In this case, the person is not logged into Facebook, so we call the login() 
					// function to prompt them to do so. Note that at this stage there is no indication
					// of whether they are logged into the app. If they aren't then they'll see the Login
					// dialog right after they log in to Facebook. 
					// The same caveats as above apply to the FB.login() call here.
					FB.login();
				}
			});
		};

		// Load the SDK asynchronously
		(function(d) {
			var js, id = 'facebook-jssdk', ref = d
					.getElementsByTagName('script')[0];
			if (d.getElementById(id)) {
				return;
			}
			js = d.createElement('script');
			js.id = id;
			js.async = true;
			js.src = "//connect.facebook.net/en_US/all.js";
			ref.parentNode.insertBefore(js, ref);
		}(document));

		// Here we run a very simple test of the Graph API after login is successful. 
		// This testAPI() function is only called in those cases. 
		function lobbyLink() {
			window.location = "http://ems.informatik.uni-oldenburg.de:1317/i-like-that/html/lobby.html";
		}
	</script>
	

		<img src="../images/FACEBOOK_LOGIN_BUTTON.png" id="fb-button" onclick="FB.login()">
		
	
		</section>

	</section>

	<!--Fußzeile-->
	<footer id="footer-container">
		<!-- Impressum usw soll hier rein-->
		<a href="../html/impressum.html">Impressum</a> | 
		<a href="../html/kontakt.html">Kontakt</a> | 
		<a href="../html/datenschutzbestimmung.html">Datenschutz</a>
	</footer>

</body>
</html>